<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="zh-CN" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMaster - {% block title %}{% endblock %}</title>
    
    <!-- 样式资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-500: #6366f1;
            --primary-600: #4f46e5;
            --secondary-500: #06b6d4;
            --surface-50: #f8fafc;
            --surface-200: #e2e8f0;
            --surface-900: #0f172a;
            --glass-bg: rgba(255, 255, 255, 0.05);
        }

        body {
            background: #0f172a; /* 主背景色 */
            background-image: 
                linear-gradient(
                    to bottom right,
                    rgba(99, 102, 241, 0.1) 0%,   /* 主色透明层 */
                    rgba(6, 182, 212, 0.05) 100%  /* 辅色透明层 */
                ),
                repeating-linear-gradient(
                    45deg,
                    rgba(255,255,255,0.03) 0px,
                    rgba(255,255,255,0.03) 2px,
                    transparent 2px,
                    transparent 4px
                ); /* 添加微妙纹理 */
            min-height: 100vh;
            font-family: 'Inter', system-ui, sans-serif;
            color: var(--surface-900);
            line-height: 1.6;
        }

        .glass-panel {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
        }

        .navbar {
            background: linear-gradient(90deg, 
                rgba(99, 102, 241, 0.9) 0%, 
                rgba(79, 70, 229, 0.9) 100%) !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(8px);
        }

        .nav-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            letter-spacing: -0.03em;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-brand:hover {
            transform: translateY(-2px);
        }

        .nav-btn {
            color: #ffffff !important; /* 深蓝色 */
            padding: 8px 20px;
            border-radius: 12px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .nav-btn:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary-500), var(--secondary-500));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .alert {
            border-radius: 12px;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        footer {
            background: var(--surface-900);
            color: var(--surface-200);
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
            padding-top: 4rem !important;
        }

        .footer-link {
            color: var(--surface-200);
            text-decoration: none;
            position: relative;
            padding-bottom: 2px;
        }

        .footer-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-500);
            transition: width 0.3s ease;
        }

        .footer-link:hover {
            color: white;
        }

        .footer-link:hover::after {
            width: 100%;
        }

        @media (max-width: 768px) {
            .nav-brand {
                font-size: 1.2rem;
            }
            
            .nav-btn {
                padding: 6px 16px;
                font-size: 0.9rem;
            }
            
            footer {
                clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 100%);
            }
        }

        /* 动态加载动画 */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .loading-overlay {
            background: rgba(255, 255, 255, 0.95) url('data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="none" stroke="%236366f1" stroke-width="8" stroke-dasharray="164 56"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.5s" repeatCount="indefinite"/></circle></svg>') no-repeat center;
            background-size: 80px;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <div class="loading-overlay"></div>

    <nav class="navbar navbar-expand-lg navbar-dark py-3">
        <div class="container">
            <a class="nav-brand text-light" href="/">
                <i class="fas fa-code"></i> CodeMaster
            </a>
            
            <div class="d-flex align-items-center gap-3">
                {% if current_user.is_authenticated %}
                <div class="d-flex align-items-center gap-3">
                    <div class="user-avatar">
                        {{ current_user.username[:1]|upper }}
                    </div>
                    
                    <div class="d-flex gap-2">
                        {% if current_user.role == 'teacher' %}
                        <a href="/create_task" class="nav-btn">
                            <i class="fas fa-plus me-2"></i>新任务
                        </a>
                        {% endif %}
                        
                        <a href="{{ url_for('history_page') }}" class="nav-btn">
                            <i class="fas fa-history me-2"></i>历史
                        </a>
                        
                        <a href="/logout" class="nav-btn">
                            <i class="fas fa-sign-out-alt me-2"></i>退出
                        </a>
                    </div>
                </div>
                {% else %}
                <div class="d-flex gap-2">
                    <a href="/login" class="nav-btn">
                        <i class="fas fa-sign-in-alt me-2"></i>登录
                    </a>
                    <a href="/register" class="nav-btn" style="background: rgba(255,255,255,0.15)">
                        <i class="fas fa-user-plus me-2"></i>注册
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="container my-5">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show glass-panel mb-4" role="alert">
                    <i class="fas fa-{% if category == 'success' %}check-circle{% else %}exclamation-triangle{% endif %} me-2"></i>
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        {% block content %}{% endblock %}
    </main>

    <div id="loadingToast" class="toast align-items-center position-fixed bottom-0 end-0 m-3" role="alert">
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-spinner fa-spin me-2"></i>加载中...
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
    <footer class="py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-4">
                    <h5 class="mb-4">
                        <i class="fas fa-rocket me-2"></i>快速通道
                    </h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="#" class="footer-link">
                            <i class="fas fa-book me-2"></i>学习文档
                        </a>
                        <a href="#" class="footer-link">
                            <i class="fas fa-project-diagram me-2"></i>实战项目
                        </a>
                        <a href="#" class="footer-link">
                            <i class="fas fa-trophy me-2"></i>成就系统
                        </a>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <h5 class="mb-4">
                        <i class="fas fa-hands-helping me-2"></i>支持
                    </h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="#" class="footer-link">
                            <i class="fas fa-comments me-2"></i>在线社区
                        </a>
                        <a href="#" class="footer-link">
                            <i class="fas fa-headset me-2"></i>技术支持
                        </a>
                        <a href="#" class="footer-link">
                            <i class="fas fa-file-alt me-2"></i>服务条款
                        </a>
                    </div>
                </div>
                
                <div class="col-lg-4 text-center">
                    <div class="mb-4">
                        <img src="../static/images/" alt="AI助手" 
                             style="width: 120px; filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.3))"
                             class="animate-float">
                    </div>
                    <div class="text-muted small">
                        © 2023 CodeMaster 
                        <div class="mt-2">
                            <a href="#" class="text-light me-3">
                                <i class="fab fa-github"></i>
                            </a>
                            <a href="#" class="text-light me-3">
                                <i class="fab fa-weixin"></i>
                            </a>
                            <a href="#" class="text-light">
                                <i class="fab fa-slack"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加悬浮动画
        const floatElements = document.querySelectorAll('.animate-float');
        floatElements.forEach(el => {
            el.style.animation = 'float 3s ease-in-out infinite';
        });
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>